<style lang="less">
@import './login.less';
</style>

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-header"></div>
        <div class="login-container">
            <div class="login-container-side-image"></div>
            <div class="login-container-con">
                <Card :bordered="false" style="height: 100%;">
                    <p slot="title">
                        <Icon type="log-in"></Icon>
                        欢迎登录
                    </p>
                    <div class="form-con">
                        <Form ref="loginForm" :model="form" :rules="rules">
                            <FormItem prop="userName">
                                <Input v-model="form.userName" placeholder="请输入用户名" @on-blur="clearFailedMessage">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                                </Input>
                            </FormItem>
                            <FormItem prop="password" @change="clearFailedMessage">
                                <Input type="password" v-model="form.password" placeholder="请输入密码" @on-blur="clearFailedMessage" @keyup.enter="clearFailedMessage">
                                <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                                </Input>
                            </FormItem>
														<span style="color:red;opacity:0;" :style="{opacity: loginFailed}">用户名或密码错误</span>
                            <FormItem style="margin-top:40px;">
                                <Button @click="handleSubmit" type="primary" long :loading="loading">登录</Button>
                            </FormItem>
                        </Form>
                    </div>
                </Card>
            </div>
        </div>

    </div>
</template>

<script>
import md5 from 'js-md5';
import querystring from 'querystring';
import { HOST } from '../libs/config.js';
export default {
  data() {
    return {
      form: {
        userName: '0000003',
        password: 'gongxun'
      },
      rules: {
        username: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
			},
			loginFailed: '0',
			loading: false
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
					this.loading = true;
          this.$axios.post(HOST + '/login/checklogin',
              querystring.stringify({
                username: this.form.userName,
                password: md5(this.form.password + 'gongxun')
              }),
              {
                withCredentials: true
              }
            )
            .then(response => {
							this.loading = false;
              const data = response.data;
              if (data.status === 'success') {
                this.$store.commit(
                  'setAvator',
                  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg'
                );
                
                let userInfo = {
                  access: data.data.position,
                  username: data.data.username,
                  uid: data.data.uid
                }
                localStorage.setItem('userInfo', JSON.stringify(userInfo));
                this.$store.commit('setUsername', data.data.username);
                this.$store.commit('setUserAccess', data.data.position);
                this.$router.push({
                  name: 'home_index'
                });
              } else if (data.status === 'fail') {
								this.loginFailed = '1';
							}
            });
        }
      });
		},
		clearFailedMessage() {
			this.loginFailed = '0';
		}
  }
};
</script>

<style>

</style>
